<template>
    <div :class="classObj" class="vue-admin-beautiful-wrapper">
        <component
            :is="'vab-layout-' + settings.theme.layout"
            :collapse="settings.collapse"
            :device="settings.device"
            :fixed-header="settings.theme.fixedHeader"
            :show-tabs="settings.theme.showTabs"
        />
        <el-backtop target="#app"/>
        <!--  主题组件放到layouts下防止主题切换，导致主题组件重新加载 -->
        <vab-theme-drawer/>
        <vab-theme-setting/>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import {Component} from 'vue-property-decorator';
	import {StoreDictEnum, SettingMutationEnum, SettingsGetterEnum} from '@/store/enum/store.enum'
    import VabLayoutVertical from './VabLayoutVertical/index';
    import VabThemeDrawer from '@/vab/components/VabTheme/components/VabThemeDrawer.vue';
    import VabThemeSetting from '@/vab/components/VabTheme/components/VabThemeSetting.vue';
    import VabLayoutColumn from './VabLayoutCommon/'

    @Component({components: {VabThemeDrawer, VabThemeSetting, VabLayoutVertical}})
    export default class Layouts extends Vue {

        private isMobile: boolean = false;
        private oldLayout: string = '';

        get settings() {
            return {
                device: this.$store.getters[SettingsGetterEnum.device],
                collapse: this.$store.getters[SettingsGetterEnum.collapse],
                theme: this.$store.getters[SettingsGetterEnum.theme],
            }
        };

        get classObj() {
            return {
                mobile: this.settings.device === 'mobile',
            }
        };
        beforeCreate(){
        	// 获取国际化字典
        	this.$store.dispatch(StoreDictEnum.i18n);
		};

        beforeMount() {
            this.oldLayout = this.settings.theme.layout
            window.addEventListener('resize', this.handleLayouts)
        };

        // beforeUnmount已失效
        beforeDestroy() {
            window.removeEventListener('resize', this.handleLayouts)
            if (this.isMobile) this.settings.theme.layout = this.oldLayout
        };

        mounted() {
            this.handleLayouts()
        };

        private toggleDevice(val) {
            this.$store.commit(SettingMutationEnum.toggleDevice, val)
        };

        private foldSideBar() {
            this.$store.commit(SettingMutationEnum.foldSideBar)
        };

        private openSideBar() {
            this.$store.commit(SettingMutationEnum.openSideBar)
        };

        private handleLayouts() {
            const isMobile = document.body.getBoundingClientRect().width - 1 < 992
            if (this.isMobile !== isMobile) {
                if (isMobile) {
                    this.oldLayout = this.settings.theme.layout
                    this.foldSideBar()
                } else {
                    this.openSideBar()
                }
				this.settings.theme.layout = isMobile ? 'vertical' : this.oldLayout
				this.toggleDevice(isMobile ? 'mobile' : 'desktop')
				this.isMobile = isMobile
            }
        };
    }
</script>

<style lang="scss" scoped>
    .vue-admin-beautiful-wrapper {
        position: relative;
        width: 100%;
        height: 100%;

        [class*='vab-layout-'] {
            position: relative;

            ::v-deep {
                .vab-layout-header {
                    /**box-shadow: $base-box-shadow;*/
                }
            }

            &.fixed {
                padding-top: $base-nav-height + $base-tabs-height;
            }

            &.fixed.no-tabs-bar {
                padding-top: $base-nav-height;
            }
        }

        ::v-deep {
            .fixed-header {
                position: fixed;
                top: 0;
                right: 0;
                /*left: 0;*/
                z-index: $base-z-index - 1;
                /*width: 100%;*/
            }

            .vab-main {
                position: relative;
                width: auto;
                min-height: 100%;
                margin-left: $base-left-menu-width;

                &.is-collapse-main {
                    margin-left: $base-left-menu-width-min;

                    .fixed-header {
                        left: $base-left-menu-width-min;
                        width: calc(100% - #{$base-left-menu-width-min});
                    }
                }
            }
        }

        /* 手机端开始 */
        &.mobile {
            ::v-deep {
                .vab-layout-vertical {
                    .el-scrollbar.vab-side-bar.is-collapse {
                        width: 0;
                    }

                    .vab-main {
                        .fixed-header {
                            left: 0;
                            width: 100%;
                        }

                        width: 100%;
                        margin-left: 0;
                    }
                }

                /* 隐藏分页和页码跳转 */
                .el-pager,
                .el-pagination__jump {
                    display: none;
                }
            }
        }

        /* 手机端结束 */
    }
</style>
